<ix-page-header>
  <mat-button-toggle-group
    aria-label="Tabs"
    [value]="selectedIndex"
    [disabled]="isLoading$ | async"
  >
    <mat-button-toggle
      [value]="JobTab.All"
      (click)="onTabChange(JobTab.All)"
    >{{ 'All' | translate }}</mat-button-toggle>
    <mat-button-toggle
      [value]="JobTab.Running"
      (click)="onTabChange(JobTab.Running)"
    >{{ 'Active' | translate }}</mat-button-toggle>
    <mat-button-toggle
      [value]="JobTab.Failed"
      (click)="onTabChange(JobTab.Failed)"
    >{{ 'Failed' | translate }}</mat-button-toggle>
  </mat-button-toggle-group>

  <ix-search-input1
    [value]="filterString"
    [disabled]="!!(isLoading$ | async)"
    (search)="onListFiltered($event)"
  ></ix-search-input1>
</ix-page-header>

<ix-table
  [ixUiSearch]="searchableElements.elements.jobs"
  [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
  [emptyConfig]="emptyService.defaultEmptyConfig(emptyType$ | async)"
>
  <thead
    ix-table-head
    [columns]="columns"
    [dataProvider]="dataProvider"
  ></thead>
  <tbody
    ix-table-body
    [columns]="columns"
    [dataProvider]="dataProvider"
    [isLoading]="!!(isLoading$ | async)"
  >
    <ng-template
      let-job
      ix-table-cell
      [columnIndex]="0"
      [dataProvider]="dataProvider"
    >
      <ix-job-name [job]="job"></ix-job-name>
    </ng-template>

    <ng-template let-job ix-table-details-row [dataProvider]="dataProvider">
      <ix-job-logs-row [job]="job"></ix-job-logs-row>
    </ng-template>
  </tbody>
</ix-table>
<ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
